<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
<html>
<head>
    <title>we job</title>
</head>
<body>
<button class="layui-btn layui-btn-primary" id="search"  data-toggle="modal" data-target="#myLargeModalLabel">添加电影类型</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="150">
    </colgroup>
    <thead>
    <tr>
        <th>电影类型</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${type.list}" var="item">
        <tr>
            <td>${item.type_name}</td>
            <td><button class="layui-btn layui-btn-normal" onclick="updateCity(${item.type_id},'${item.type_name}')">修改</button></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<nav style="text-align: center">
    <ul class="detail-pager" id="pagination" ></ul>
</nav>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content">
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="cityName" required  lay-verify="required" placeholder="输入电影类型" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabe2">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <div class="modal-content">
                <input type="hidden" id="cityId" name="cityId">
                <div class="layui-form-item" style="margin-top: 30px">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="cityName" required  lay-verify="required" placeholder="输入电影类型" autocomplete="off" class="layui-input" id="cityName">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script>
    $(function () {
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/user/addType',
                    dataType: "json",
                    async:true,
                    type:'POST',
                    data:data.field,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
            form.on('submit(formDemo1)', function (data) {
                console.log(data.field);
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/user/updateType',
                    dataType: "json",
                    async:true,
                    type:'POST',
                    data:data.field,
                    success:function (data) {
                        if(data.status===1) {
                            layer.msg("修改成功",function () {
                                NProgress.done();
                                window.location.reload();
                            });
                        }
                    }
                });
                return false;
            });
        });
        if((${type.total})==0){
            $('#pagination').hide();
            $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
        }else{
            $('#pagination').bootstrapPaginator({
                //主版本号
                bootstrapMajorVersion: 3,
                //当前页
                currentPage: ${type.pageNum},
                //总页数
                totalPages: ${type.pages},
                //请求url
                pageUrl: function (type, page, current) {
                    return '${pageContext.request.contextPath}/backend/user/type?pageNum='+page;
                },
                //显示分页条信息
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
            });
        }
    })
    function updateCity(id,name) {
        $('#myLargeModalLabe2').modal('show');
        $('#cityId').val(id);
        $('#cityName').val(name);
    }
</script>
</body>
</html>
